<template>
    <div class="search">
        <van-search
            v-model="keyword"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
        />
        <!-- 下拉菜单 -->
        <DropDown 
        v-if="filterCategory.length != 0" 
        :filterCategory='filterCategory' 
        :goodsList='goodsList'
        @priceChange="priceChange"
        @categoryChange="categoryChange"
        ></DropDown> 
   
       
    </div>
</template>

<script>
// 导入数据请求
import {getSearchList} from '@/utils/https.js'
// 引入下拉菜单
import DropDown from '@/components/DropDown'
export default {
data(){
    return{
       keyword:'',
       size:30,
       page:1,
       order:'desc',       //价格由高到低
       categoryId:0,
       sort:'id',          //由id或者price价格 莱排序
       goodsList:[],       //全部商品书数据
       filterCategory:[],  //分类标签页面数据
    }
},
methods:{
    onSearch(){
        // console.log(this);
        // console.log(this.value);
         console.log(this.keyword);
         this.getedata()
    },
    onCancel(){
        this.$router.push('/home')
       
    },
    getedata(){
        let paramsObj = {
            keyword:this.keyword,
            size:this.size,
            page:this.page,
            order:this.order,  //价格由高到低
            categoryId:this.categoryId,
            sort:this.sort  //由id或者price价格 莱排序
       }
        getSearchList(paramsObj).then((res)=>{
            console.log(res);
            this.filterCategory = res.data.data.filterCategory
            this.goodsList = res.data.data.goodsList
            this.filterCategory = JSON.stringify(this.filterCategory).replace(/name/g , "text").replace(/id/g , 'value')
            this.filterCategory = JSON.parse(this.filterCategory)
        })
    },
    categoryChange(m){
        this.categoryId = m
        this.sort = 'id'
            this. getedata()
    },
    priceChange(m){
        console.log(m);
        this.order = m
        this.sort = 'price'
        this. getedata()
    }
},
components:{
    DropDown
},
created(){
   
    this.getedata()
}
}
</script>

<style lang='less' scoped>

</style>